<template>
	<!-- 道具 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topnav">
			<navigator open-type="navigateBack">
				<image src="/static/images/back_white.png"></image>
			</navigator>
			<view class="title">道具</view>
		</view>
		<!-- 功能 -->
		<view class="main">
			<navigator class="item" url="/pages/mine/coupon/coupon">
				<view class="item_title">
					<image src="/static/images/mine/prop_coupon.png"></image>
					<text>优惠券</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" url="/pages/mine/recycleCoupon/recycleCoupon">
				<view class="item_title">
					<image src="/static/images/mine/recyclecoupon.png"></image>
					<text>回收券</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" url="./reextraction">
				<view class="item_title">
					<image src="/static/images/mine/extraction.png"></image>
					<text>重抽卡</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
			<view class="line"></view>
			<navigator class="item" url="./goodsfragment">
				<view class="item_title">
					<image src="/static/images/mine/fragment.png"></image>
					<text>商品碎片</text>
				</view>
				<image src="/static/images/more.png" class="item_more"></image>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.topnav{
	width: 750rpx;
	height: 693rpx;
	background-image: url("../../../static/images/oneImage/beijingw.png");
	background-size: 100% 100%;
	padding: calc(var(--status-bar-height) + 50rpx) 30rpx 50rpx;
	box-sizing: border-box;
	position: relative;
	
	navigator{
		position: absolute;
		
		image {
			width: 22rpx;
			height: 40rpx;
		}
	}
	.title {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}
}
.main{
	width: 690rpx;
	height: 80vh;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	position: fixed;
	top: 230rpx;
	left: 30rpx;
	
	.item{
		@include between;
		
		&_title{
			@include between;
			
			image{
				width: 40rpx;
				height: 40rpx;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
		}
		&_more{
			width: 12rpx;
			height: 24rpx;
		}
	}
	.line{
		width: 630rpx;
		height: 1rpx;
		background: #E5E5E5;
		margin: 26rpx 0;
	}
}
</style>
